<template>
  <demoBlock title="自定义滑块大小">
    <vcu-swipe
      class="customSize-swipe"
      :loop="false"
      :width="80"
      :show-indicators="false"
    >
      <vcu-swipe-item><div class="demo-item">1</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">2</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">3</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">4</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">5</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">6</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">7</div></vcu-swipe-item>
      <vcu-swipe-item><div class="demo-item">8</div></vcu-swipe-item>
    </vcu-swipe>
  </demoBlock>
</template>


<style lang="less" >
.customSize-swipe .vcu-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  .demo-item {
    margin: 0 10px;
    background-color: #39a9ed;
  }
}
</style>